<template>
  <div :class="['i-select', { 'back-stage': backStage }]">
    <InputLabel v-if="label" :text="label" :required="required" :backStage="backStage" />
    <Select
      v-bind="$attrs"
      v-on="$listeners"
      :class="[fz, !tagCloseBtn && 'hide-tag-close-btn']"
      :style="selectStyle"
      :clearable="clearable"
      :filterable="filterable"
    >
      <Option
        v-for="(item, index) in optionList"
        :value="item.value"
        :key="index"
        :disabled="item.disabled"
        >{{ item.label }}</Option
      >
      <slot name="prefix" slot="prefix"></slot>
    </Select>
  </div>
</template>

<script>
import { inputMixin } from "./mixin/inputMixin";
// Iview Select组件使用v-model时，绑定的是value
// 需要同时拿到label和value时，需要使用label-in-value和@on-change事件
// @group iview
export default {
  name: "IviewSelect",
  mixins: [inputMixin],
  // components: { InputLabel },
  // 自定义props，其余props和iview官方API保持一致
  props: {
    // 下拉选项
    optionList: {
      type: Array,
    },
    // 是否为后台管理样式
    backStage: {
      type: Boolean,
    },
    // 输入框标签
    label: {
      type: String,
    },
    // 是否必填，传入label才有效
    required: {
      type: Boolean,
    },
    // 输入框的宽度：
    // 字符串：long：400px，middle：240px，short：120px
    // 数字：单位px，自动转化为rem
    inputWidth: {
      type: [String, Number],
      default: "middle",
    },
    // 修改默认值
    filterable: {
      type: Boolean,
      default: true,
    },
    // 多选时标签的关闭按钮是否显示
    tagCloseBtn: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      fz: "",
      selectStyle: {},
    };
  },
  computed: {},
  methods: {},
  mounted() {
    if (["long", "middle", "short"].includes(this.inputWidth)) {
      this.fz = "input-" + this.inputWidth;
    } else {
      let width = parseInt(this.inputWidth);
      this.selectStyle = width ? { width: width / 16 + "rem" } : {};
    }
  },
};
</script>

<style lang="less" scoped>
@import "./config/input";
@import "./config/button";
.i-select {
  .input-layout();
  /deep/.ivu-select {
    .input-text();
    .input-width();
    .ivu-select-placeholder {
      .placeholder();
    }
    &.ivu-select-disabled .ivu-select-selection,
    &.ivu-select-disabled .ivu-select-selection:hover,
    &.ivu-select-disabled .ivu-select-selection:focus {
      opacity: 0.5;
      // border: @input-border;
      border: 1px solid #ECEEF0;
      // box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.48);
    }
    // 显示下拉时
    &.ivu-select-visible .ivu-select-selection {
      box-shadow: none;
    }
    &.ivu-select-multiple {
      .ivu-tag.ivu-tag-checked {
        .border(rgba(200, 200, 200, 0.2));
        .bg(rgba(100, 100, 100, 0.2));
        .ivu-tag-text {
          line-height: 24px;
        }
        // // 除了第一个，其他隐藏
        // &:not(:first-child) {
        //   display: none;
        // }
        // // 第一个
        // &:first-child::after {
        //   // content: attr();
        //   position: absolute;
        //   right: -24px;
        //   .circle(20px);
        //   .bg(red);
        // }
      }
      .ivu-select-input {
        line-height: 32px;
        height: 32px;
        top: 0;
      }
    }
    &.hide-tag-close-btn {
      .ivu-tag {
        > .ivu-icon {
          display: none;
        }
        > span:not(.ivu-select-max-tag) {
          margin-right: 0;
        }
      }
    }
    .ivu-select-selection {
      .input-view();
      .input-height();
      span {
        line-height: @input-height;
        font-size: @base-font-size;
      }
      .ivu-select-input {
        .input-height();
        // color: @text-color;
        color: #000;
        font-size: @base-font-size;
      }
    }

    // 下拉内容
    .ivu-select-dropdown {
      .select-dropdown{
        
      }
      position: absolute !important;
    }
  }
}
</style>
